1. create-react-app 

下载:  npm i create-react-app -g 

使用: create-react-app 项目名称  npm start 

2. 组件化

类组件

class App extends React.Component{
    render(){
        return jsx/null
    }
}

函数组件

function App(){
    return jsx/null
}

组件使用: 
组件在哪里使用,组件的结构就渲染到哪里
<App></App>
<App/>

3. 类组件的状态

3.1 定义: 
constructor(){
    super()
    this.state = {
        // 属性: 值
        count: 0,
        xxx: '123'

    }
}

3.2 使用: 

render(){
    return <div>{this.state.属性名}</div>
}

3.3 修改state的值 

this.setState({
    xxx:  123
})

4. 类组件中事件处理函数的this指向问题

我们希望把类组件中事件处理函数的代码和jsx代码分开写, 会导致事件处理函数中this指向undefined

解决一: 

<button onclick={()=>{
    this.handle()
}}>按钮</button>


解决二: 

construtor(){
    super()
    this.handle =  this.handle.bind(this)
}
render(){
    return <button onclick={this.handle}>按钮</button>
}




